/*
 * @Title: 回复
 * @Created by: gsjPC 
 */
<template>
	<view>
		
	
	<scroll-view scroll-y>
		<!-- 回复主评论的评论详情 -->
		<uni-popup ref="goHfDetail1" :type="type" :custom="true" @change="change" class="goHfDetail1">
			<view class="uni-share" :style="{height:replyHeight + 'px'}">
				<view class="uni-share-title">
					<view>评论详情</view>
					<uni-icon type="closeempty" size="20" color="#999999" @tap="cancel('goHfDetail1')"></uni-icon>
				</view>
				<view class="uni-share-content">
					<view class="pl-item" v-for="(item,index1) in reply1List" :key='index1'>
						<!-- 主评论 -->
						<view @tap="packs">
							<view class="item-head">
								<image class="head-icon" :src="item.headicon" mode=""></image>
								<text class="username">{{item.username}}</text>
								<text class="time">{{item.time}}</text>
							</view>
							<text class="pinglun" ref="desc">{{item.pinglun}}</text>
							<view class="photo-list">
								<image :src='img' @click="showBig(img)" mode="" v-for="(img,index2) in item.photo" :key='index2'></image>
							</view>
						</view>

						<!-- icon -->
						<view class="zp-btn">
							<!-- 点赞 -->
							<view>
								<image src="/static/plZan0.png" mode=""></image>
								<text class="zp-text">{{item.zan}}</text>
							</view>
							<!-- 评论 -->
							<view class="plBtn" @tap="plBtn(index1)">
								<image src="/static/plPl0.png" mode=""></image>
								<text class="zp-text">{{item.plnum}}</text>
								<!-- 	<input type="text"/> -->
							</view>
							<!-- 举报 -->
							<view class="plJb" @tap="toggleJb1(index1)" >
								<image src="/static/plMore.png" mode=""></image>
								<view  
									class="jbBtn"  
									@tap="jubaoBtn(index1)" 
									v-if="jubaoBtnIndex1 == index1">
									举报
								</view>
							</view>
						</view>
						<view class="allrepTit" v-if="item.comments.length !== 0 ">全部回复</view>
						
						<view  class="allHfBox">
							
							<!-- <view :class="[item.isShow ? 'rlHeight' :'']" v-if="item.comments.comPl.length !== 0"> -->

								<view class="comment-item" v-for="(comment,index3) in item.comments" :key="index3">
									<!-- 对主评论的评论 -->
									<view @tap="togglePopup('bottom','goHfDetail2','reply2',index1,index3)">
										<view class="item-head">
											<image class="head-icon" :src="comment.comHead" mode=""></image>
											<text class="username">{{comment.name}}</text>
											<text class="time">{{comment.comTime}}</text>
										</view>
										<text class="pinglun">{{comment.comment}}</text>
									</view>
									<!-- icon -->
									<view class="zp-btn">
										<!-- 点赞 -->
										<view>
											<image src="/static/plZan0.png" mode=""></image>
											<text class="zp-text">{{comment.zan}}</text>
										</view>
										<!-- 举报 -->
										<view class="plJb" @tap="toggleJb2(index3)" >
											<image src="/static/plMore.png" mode=""></image>
											<view  
												class="jbBtn"  
												@tap="jubaoBtn(index3)" 
												v-if="jubaoBtnIndex3 == index3">
												举报
											</view>
										</view>
									</view>
									
									<view class="reply">
										<!-- 对评论的评论 -->
										<view  @tap="togglePopup('bottom','goHfDetail2','reply2',index1,index3)">
											<view class="reply-user" v-for="(pl1,pl1Index) in comment.comPl" :key="pl1Index">
												<text class="username">{{pl1.name}}：</text>
												<text class="reply-text">{{pl1.comment}}</text>
											</view>
										</view>
										<view class="reply-more" v-if="comment.comPl.length >= 2">
											<text @tap="zhanKai(item)">{{item.isShow ?'收起':'查看全部'+comment.plnum+'条回复' }}</text>
										</view>
									</view>
									
									
								</view>
							<!-- 	
							</view> -->
							
						</view>
							
					</view>
				</view>
			</view>
			<view class="talkInput">
				<view class="inputFl">
					<image src="/static/talkInput.png"></image>
					<input 
					type="input" 
					:placeholder="repPolaceholder" 
					placeholder-style="color:#B6B6B6" 
					adjust-position="false"
					@focus="isShowSendFocus"
					@blur="isShowSendBlur"/>
				</view>
				<view class="inputFr" v-if="isShowSend">
					<text>发送</text>
				</view>
			</view>
		</uni-popup>
	</scroll-view>
	<!-- 显示大图 -->
	<view class="bigPhoto" v-if="showBigPhoto" @click="packs">
		<image :src="bigImg" @click="showBigPhoto=false" mode="aspectFit"></image>
	</view>
	<!-- 回复主评论的评论详情 -->
	<reply2 ref="reply2" :reply2List="reply2List" @emptyData2="emptyData2"></reply2>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import reply2 from '@/components/reply2.vue'
	export default {
		components: {
			uniPopup,
			uniIcon,
			reply2
		},
		data() {
			return {
				type: '',
				repPolaceholder:'',
				isShowSend:false,//底部input获取焦点才显示
				jubaoBtnIndex1:-1,//默认隐藏举报按钮
				jubaoBtnIndex3:-1,//默认隐藏举报按钮
				reply2List:[],//对于某条评论数据
				bigImg:'',
				showBigPhoto:false,
			}
		},
		props: {
			reply1List: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		methods: {
			emptyData2(){
				this.reply2List = [];
			},
			togglePopup(type, open,childRefName2 = '',index1,index3) {
				this.type = type;
				this.jubaoBtnIndex1 = -1;
				 this.jubaoBtnIndex3 = -1
				if(childRefName2){
					this.reply2List.push(this.reply1List[index1].comments[index3])
					console.log(this.reply2List);
					this.$refs[childRefName2].togglePopup(type, open);
					return;
				}
				console.log(this.reply1List[0].username);
				this.repPolaceholder = '回复' + this.reply1List[0].username;
				this.$refs[open].open()
			},
			cancel(type) {
				this.$emit("emptydata");
				this.jubaoBtnIndex1 = -1;
				 this.jubaoBtnIndex3 = -1
				this.$refs[type].close();
			},
			change(e) {
				console.log(e.show)
			},
			packs(){
				this.jubaoBtnIndex1 = -1;
				 this.jubaoBtnIndex3 = -1
			},
			//举报
			toggleJb1(index1){
				if(this.jubaoBtnIndex1 !== index1){
					this.jubaoBtnIndex1 = index1;
					 this.jubaoBtnIndex3 = -1
				}else{
					this.jubaoBtnIndex1 = -1
				}
			},
			// 举报一级评论
			jubaoBtn(index1){
				console.log('举报一级评论');
				uni.navigateTo({
					url:'/pages/common/report'
				});
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
			},
			// 举报
			toggleJb2(index3){
			if(this.jubaoBtnIndex3 !== index3){
				this.jubaoBtnIndex3 = index3;
				this.jubaoBtnIndex1 = -1
			}else{
				this.jubaoBtnIndex3 = -1
			}
			},
			// 举报二级评论 
			jubaoPlBtn(index3){
				console.log('举报二级评论');
				uni.navigateTo({
					url:'/pages/common/report'
				});
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
			},
			//显示大图
			showBig(url){
				this.jubaoBtnIndex1 = -1;
				this.jubaoBtnIndex3 = -1
				this.bigImg = url
				this.showBigPhoto = true
			},
			zhanKai(item) {
				this.jubaoBtnIndex1 = -1;
				 this.jubaoBtnIndex3 = -1
				if (!item.isShow) {
					this.$set(item, 'isShow', false)
					item.isShow = !item.isShow
				} else {
					item.isShow = !item.isShow
				}
				},
				// 底部input获取焦点
				isShowSendFocus(){
					this.isShowSend = true
				},
					// 底部input失去焦点
				isShowSendBlur(){
					this.isShowSend = false
				}
		},
		computed: {
			replyHeight() {
				return global.winHeight - global.statusBarHeight
			},

		}
	}
</script>

<style>
	.pl-item {
		width: 700upx;
		padding-top: 40upx;
		height: auto;
	}

	.item-head {
		width: 700upx;
		height: 80upx;
	}

	.head-icon {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		float: left;
		margin-right: 14upx;
	}

	.username {
		font-size: 30upx;
	}

	.time {
		font-size: 22upx;
		height: 80upx;
		line-height: 80upx;
		float: right;
		margin-left: 20upx;
		color: #888888;
	}

	.time-type {
		font-size: 24upx;
		height: 80upx;
		width: 610upx;
		display: block;
		line-height: 80upx;
		float: right;
		text-align: left;
		margin-top: -40upx;
		margin-left: 20upx;
		color: #888888;
	}

	.pinglun {
		width: 619upx;
		text-align: justify;
		text-indent: 56upx;
		display: block;
		word-break: break-all;
		font-size: 28upx;
		line-height: 40upx;
		margin-top: 20upx;
		margin-left: 75upx;
		max-height: 120upx;
		overflow: hidden;
	}

	.autoPinglun {
		max-height: none;
	}

	.pinglun-food {
		text-indent: 0upx;
	}

	.photo-list {
		margin-top: 20upx;
		margin-left: 75upx;
		height: auto;
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		flex-wrap: wrap
	}

	.photo-list image {
		width: 192upx;
		margin-bottom: 15upx;
		margin-right: 15upx;
		height: 146upx;
		border-radius: 10upx;
		overflow: hidden;
	}

	.photo-list image:nth-child(3) {
		margin-right: 0;
	}

	.zp-btn {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.zp-btn>view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding:15upx 34upx 15upx 34upx;
	}
/* 	.zp-btn>view:last-child{
		margin-right:0upx;
	} */

	.zp-btn image {
		width: 29upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.zp-text {
		font-size: 24upx;
		line-height: 26upx;
		color: #999999;
	}

	.reply {
		/* 	background: #999; */
			width: 622upx;
			/* max-height: 190upx; */
			overflow: hidden;
			margin-top: 20upx;
			margin-left: 75upx;
			background-color: #F6F6F6;
			border-radius: 10upx;
			padding: 0upx 20upx;
			position: relative;
			box-sizing: border-box;
			transition: all .3s ease;
	}

	.rlHeight {
		max-height: none;
		transition: all .3s ease;
	}

	.reply:before {
		content: '';
		position: absolute;
		margin-left: 26px;
		top: -36upx;
		border: 10px solid transparent;
		border-top-color: #D0D0D0 !important;
		transform: rotateX(180deg);
		z-index: -1;
	}

	.comment-item {
		/* background: green; */
		/* margin-top: 24upx; */
	}
	.reply-user {
		line-height: 44upx;
		
	}

	.reply-user .username {
		font-size: 24upx;
		color: #22498B;
	}

	.reply-user .time {
		width: 400upx;
		display: block;
		font-size: 24upx;
		color: #54B0FF;
	}

	.reply-user .hf {
		font-size: 24upx;
		padding: 0 8upx;
		color: #333;
	}

	.reply-text {
		font-size: 26upx;
		color: #333333;
	}

	.reply-more {
		color: #86A8FF;
		font-size: 22upx;
		text-align: right;
		margin-top: 14upx;
		margin-bottom: 14upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.read-num {
		font-size: 24upx;
		color: #999999;
		float: left !important;
		margin-left: 80upx;
	}

	.plJb{
		position: relative;
		}
	.jbBtn{
		position: absolute;
		right: 0;
		font-size: 24upx;
		color: #333333;
		width: 184upx;
		height: 70upx;
		line-height: 70upx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 20px 0px rgba(216,216,216,1);
		text-align: center;
		bottom:-90upx;
		z-index: 1;
		}
	.plJb image{
		width:6upx;
		height: 26upx;
	}

	.allrepTit {
		width: 100%;
		margin: 28upx auto 40upx auto;
		font-size: 26upx;
		text-align: center;
		position: relative;
	}

	.allrepTit:before {
		content: '';
		width: 282upx;
		height: 1px;
		background: #F0F0F0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	.allrepTit:after {
		content: '';
		width: 282upx;
		height: 1px;
		background: #F0F0F0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}
	.allHfBox{
		margin-bottom:90upx;
	}
	.bigPhoto{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1099;
		background: rgba(0,0,0,0.5);
	}
	.bigPhoto image{
		width: 100%;
		height: 100vh;
	}
	/* 底部分享 */
	.uni-share {
		padding: 34upx 28upx;
		overflow-y: auto;
		background: #fff;
		border-radius: 26upx 26upx 0 0;
		box-sizing: border-box;
	}

	.uni-share-title {
		width: 100%;
		border-radius: 26upx 26upx 0 0;
		background: #FFFFFF;
		padding: 0upx 54upx;
		z-index: 9;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		line-height: 98upx;
		font-size: 24upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 28upx;
		border-bottom: 1px solid #ECEAEA;
	}

	.uni-share-title uni-icon {
		position: absolute;
		padding: 20upx;
		right:0;
	}

	.uni-share-content {
		margin-top: 44upx;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}
	.talkInput {
		width: 100%;
		padding: 0 38upx;
		height: 90upx;
		line-height: 90upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 888;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.talkInput .inputFl image {
		width: 36upx;
		height: 36upx;
		position: absolute;
		top: 50%;
		margin-top: -20upx;
		left: 40upx;
	}
	
	.talkInput input {
		height: 90upx;
		line-height: 90upx;
		padding-left: 90upx;
		font-size: 30upx;
	}
	.inputFr {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border:1px solid #B9B9B9;
		border-radius: 6upx;
		width:112upx;
		height: 60upx;
		line-height: 60upx;
	}
	.talkInput text {
		padding: 8upx;
		font-size: 30upx;
		color: #999999;
	}
	
</style>
